<template>
  <div class="add-problem-shipment-page">
    <a-spin :spinning="loading">
      <a-form ref="formRef" autocomplete="off" name="basic" :model="formState" :label-col="{ style: 'width:80px' }" :wrapper-col="{ style: 'calc(100% - 80px)' }">
        <div class="base-info">
          <div class="title">运单信息:</div>
          <a-row :gutter="8">
            <a-col v-for="(item, index) in formItemColumn" :key="index" :span="8">
              <a-form-item v-bind="item" :label-col="{ style: 'width:110px' }" :wrapper-col="{ style: 'calc(100% - 110px)' }">
                <template v-if="item.name === 'waybillNum'">
                  {{ passData[item.name] }}
                </template>

                <template v-else-if="item.name === 'depositTime'">
                  {{ dayjs(+passData[item.name]).format("YYYY-MM-DD HH:mm:ss") }}
                </template>

                <template v-else>{{ passData[item.name] }}</template>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
      </a-form>
      <a-form :model="formState" ref="formDataRef" name="basic" :label-col="{ style: 'width:145px' }" :wrapper-col="{ style: 'calc(100% - 145px)' }" autocomplete="off">
        <div class="question-info">
          <div class="title">问题类型：</div>
          <a-row>
            <a-col :span="12">
              <a-form-item label="问题件类型" name="bizProblemPieceTypeId" :rules="[{ required: true, message: '请选择问题件类型!' }]">
                <a-select v-model:value="formState.bizProblemPieceTypeId" placeholder="请选择" @change="changeType">
                  <a-select-option v-for="item in getProblemOptions" :key="item.value" :value="item.label" :label="item.label">{{ item.label }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="分摊比例">
                <div style="display: flex; justify-content: space-around">
                  <span>业务: {{ personProportion }}</span>
                  <span>公司: {{ companyProportion }}</span>
                </div>
              </a-form-item>
            </a-col>
          </a-row>
        </div>

        <div class="content-info">
          <a-row>
            <a-col :span="12" v-if="formState.bizProblemPieceTypeId === '坏账'">
              <a-form-item
                label="少付金额"
                name="totalPrice"
                :rules="[
                  { required: true, message: '请输入少付金额!' },
                  { type: 'number', min: 0.01, message: '少付金额不能为0' }
                ]"
              >
                <a-input-number :min="0" :precision="2" v-model:value="formState.totalPrice" placeholder="请输入" />
              </a-form-item>
            </a-col>

            <a-col :span="12" v-if="formState.bizProblemPieceTypeId === '重量差'">
              <a-form-item
                label="调整结算重"
                name="number"
                :rules="[
                  { required: true, message: '请选择问题件类型!' },
                  { type: 'number', min: 0.01, message: '调整结算重不能为0' }
                ]"
              >
                <a-input-number :min="0" :precision="2" v-model:value="formState.number" placeholder="请输入" />
              </a-form-item>
            </a-col>

            <a-col :span="12" v-if="formState.bizProblemPieceTypeId === '单价'">
              <a-form-item
                label="优惠单价"
                name="unitPrice"
                :rules="[
                  { required: true, message: '请输入优惠单价!' },
                  { type: 'number', min: 0.01, message: '优惠单价必须大于0!' }
                ]"
              >
                <a-input-number :min="0" :precision="2" v-model:value="formState.unitPrice" placeholder="请输入" />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="费用调整" name="costType" :rules="[{ required: true, message: '请选择费用调整!' }]">
                <a-select v-model:value="formState.costType" placeholder="请选择">
                  <a-select-option :value="1">减免</a-select-option>
                  <a-select-option :value="2">增加</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>

          <div style="margin-top: 40px" v-if="formState.bizProblemPieceTypeId === '附加费'">
            <vxe-table show-overflow="title" height="300" size="small" align="center" :data="formState.costList" :row-config="{ height: 45 }" :scroll-y="{ enabled: true, gt: 30 }">
              <vxe-column field="costName" title="附加费名称"></vxe-column>
              <vxe-column field="clearingUnitPrice" title="单价"></vxe-column>
              <vxe-column field="number" title="数量"></vxe-column>
              <vxe-column field="unitPrice" title="调整单价">
                <template #default="{ row }">
                  <a-input-number :min="0" :precision="2" v-model:value="row.unitPrice"></a-input-number>
                </template>
              </vxe-column>
            </vxe-table>
          </div>

          <!-- 分摊费用 -->
          <div class="title">分摊费用：</div>
          <a-row>
            <a-col :span="6">
              <a-form-item label="总金额">{{ getAllPrice + "元" }}</a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item label="个人">
                {{ personPrice }}
              </a-form-item>
            </a-col>

            <a-col :span="5">
              <a-form-item label="公司">
                {{ companyPrice }}
              </a-form-item>
            </a-col>

            <a-col :span="24" style="margin-top: 50px">
              <a-form-item label="问题描述" name="description">
                <a-input v-model:value="formState.description" placeholder="请输入" />
              </a-form-item>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </a-spin>
    <div class="operation-wrapper">
      <a-button :loading="loading" type="primary" @click="onSubmit" v-debounce>提 交</a-button>
      <a-button @click="resetForm">取 消</a-button>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "ProblemShipment"
};
</script>
<script setup lang="ts">
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { formItemColumn } from "./data";
import dayjs from "dayjs";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: Base.GeneraDataType;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "submit"): void;
  (e: "update:visible", visible: boolean): void;
}>();
const { visible, passData } = toRefs(props);
const {
  formState,
  loading,
  formDataRef,
  getProblemOptions,
  getProblemOptionsApi,
  getAllPrice,
  getChargeCostByWabbillHandle,
  personPrice,
  companyPrice,
  personProportion,
  companyProportion,
  changeType
} = InitHook({ passData });
const { onSubmit, resetForm } = OperationHook({ loading, formDataRef, formState, emit, passData, getProblemOptions });

const init = () => {
  getProblemOptionsApi();
  getChargeCostByWabbillHandle();
};
watch(
  () => visible.value,
  v => {
    if (!v) {
      resetForm();
      personProportion.value = 0;
      companyProportion.value = 0;
    } else {
      init();
    }
  }
);
init();
</script>
<style lang="stylus" scoped>
.add-problem-shipment-page {
    padding-bottom: 50px;
    .title{
        font-weight: 600;
        font-size: 14px;
        padding: 12px;
    }
    .base-info{
        margin-bottom:12px
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0px 0px 4px 0px #ccc;
        font-weight: 600;

        :deep(.ant-form-item){
          margin-bottom: 8px;
        }
    }

    .question-info{
       padding:30px 6px;
       margin-bottom:12px
       background-color: #fff;
       border-radius: 8px;
       box-shadow: 0px 0px 4px 0px #ccc;
       font-weight: 600;

         :deep(.ant-form-item){
          margin-bottom: 8px;
         }
    }

    .content-info{
        margin-bottom:12px
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0px 0px 4px 0px #ccc;
        font-weight: 600;
        padding:20px 6px;

        :deep(.ant-form-item){
          margin-bottom: 8px;
        }
        :deep(.ant-input-number){
          width:100%;
        }
    }

    .operation-wrapper{
        position: absolute;
        background-color: #fff;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 12px 0;
        text-align: center;
        box-shadow: 1px 1px 5px #ccc;
        z-index: 99;
        :deep(.ant-btn-primary){
          margin-right: 12px;
        }
      }

  }
</style>
